import { Space, Button, message, Image, Row, Col, Descriptions } from 'antd';
import ProCard from '@ant-design/pro-card';
import React, { useState, useRef, useEffect } from 'react';
import { getDvaApp, history, } from 'umi';
import ProForm, {
    ProFormText,
} from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';
import $utils from '@/utils/utils';
import { getHealthDetail, } from '@/services/health';
import { codeColorData, hasPositiveData, healthLabelData, nucleinAcidStatusData, vaccineStatusData } from '@/utils/common';

const userInfo = $utils.getStorage('user_info');

const labelByValue = (value: number, data: any) => {
    const item = data.find((i: any) => i.value === value);
    return item ? item.label : '';
}

const Detail: React.FC = () => {

    // 解决无法调用dispatch
    const dispatch = getDvaApp()._store.dispatch;
    const formRef = useRef<ProFormInstance>();
    const [cur_id, setCur_id] = useState<string>();
    const [healthDetail, setHealthDetail] = useState<any>();

    const l_state: any = history.location.state;
    if (!cur_id && !l_state) {
        history.push('/OperationsMange/Health');
    }

    const id: string = l_state?.data?.id || '';
    //  同path更新,只更新state时，通过id重新请求数据
    if ((l_state && id) && (!cur_id || cur_id !== id)) {
        setCur_id(id);
    } else if (l_state && !id && cur_id !== id) {
        setCur_id('');
    }

    const isDetail: boolean = l_state?.status === 'detail';

    useEffect(() => {

        const getHealthData = async () => {
            try {
                const msg = await getHealthDetail({ id: cur_id });;
                if (msg.code === 0) {
                    let data = {};
                    data = Object.assign({}, msg.body, data);
                    setHealthDetail(data);
                    formRef && formRef.current?.resetFields();
                    return;
                }
            } catch (error) {
                console.log(error);
            }
        };

        getHealthData();
    }, [cur_id]);

    return (
        <PageContainer>
            {healthDetail && <ProCard style={{ marginTop: 8 }} gutter={8} >
                <ProForm
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    layout={"horizontal"}
                    formRef={formRef}
                    initialValues={healthDetail}
                    submitter={{
                        render: (props, doms) => {
                            return [
                                <Space style={{ marginTop: '3%', marginLeft: '16.66666667%' }}>
                                    <Button onClick={() => {
                                        // 设置当前tab对象
                                        $utils.setNewTab(dispatch, { name: '健康打卡', path: '/OperationsMange/Health', isTopMenu: true });
                                        history.push('/OperationsMange/Health');
                                    }}>返回</Button>
                                </Space>
                            ]
                        }
                    }}
                >
                    <Row>
                        <Col xxl={8} lg={12}>
                            <ProFormText
                                disabled={true}
                                name="name"
                                label={'姓名'}
                            />
                        </Col>
                        <Col xxl={8} lg={12}>
                            <ProFormText
                                disabled={true}
                                name="phone"
                                label={'手机号'}
                            />
                        </Col>
                        <Col xxl={8} lg={12}>
                            <ProFormText
                                disabled={true}
                                name="stationName"
                                label={'校园小区'}
                            />
                        </Col>
                    </Row>
                    <Descriptions
                        bordered
                        column={3}
                        style={{ padding: '0 3%' }}>
                        <Descriptions.Item label={'健康状况'}>{labelByValue(healthDetail.label, healthLabelData)}</Descriptions.Item>
                        <Descriptions.Item label={'是否有确认病例或疑似病例'}>{labelByValue(healthDetail.hasPositive, hasPositiveData)}</Descriptions.Item>
                        <Descriptions.Item label={'健康码颜色'}>{labelByValue(healthDetail.codeColor, codeColorData)}</Descriptions.Item>
                        <Descriptions.Item label={'核酸状态'}>{labelByValue(healthDetail.nucleinAcidStatus, nucleinAcidStatusData)}</Descriptions.Item>
                        <Descriptions.Item label={'新冠疫苗接种情况'}>{labelByValue(healthDetail.vaccineStatus, vaccineStatusData)}</Descriptions.Item>
                        <Descriptions.Item label={''}>{ }</Descriptions.Item>
                        <Descriptions.Item label={'佩戴口罩照片'}>
                            <Image width={80} height={80} src={healthDetail.imageMasks} />
                        </Descriptions.Item>
                        <Descriptions.Item label={'核酸照片'}>
                            <Image width={80} height={80} src={healthDetail.imageNucleinAcid} />
                        </Descriptions.Item>
                        <Descriptions.Item label={''}>{ }</Descriptions.Item>
                        <Descriptions.Item label={'场所消杀、快件消杀、记录表照片'} span={3}>
                            <Image.PreviewGroup>
                                <Space wrap>
                                    {healthDetail.imagePlace.length > 0 ? healthDetail.imagePlace.map((src: string) => {
                                        return <Image width={65} height={65} src={src} />
                                    }) : '无图片'}
                                </Space>
                            </Image.PreviewGroup>
                        </Descriptions.Item>
                    </Descriptions>
                </ProForm>
            </ProCard>}
        </PageContainer>
    );
};

export default Detail;
